<template>
 <div class="chart">
	<div class="count">
		<b v-for="(item, index) in prosecutorArr" :key="index">
			<div :style="{top: -item*40+'px'}">
				<i v-for="(ic, indexc) in 10" :key="indexc">
					{{ic-1}}
				</i>
			</div>
		</b>
		<span> 条 </span>
	</div>
</div>
</template>
<script>
  export default {
	// 此处是模拟数字变化，所以数字都不会改变，
    props: {
      numbers: {
        type: Number,
        default: 0
      },
    },
    watch: {
      	numbers(val){
			if(val){
				let num = String(val).length
				let temp = []
			for(let i= 0 ; i <= num; i++){
				temp.push("0")
			}
				this.count = num
				this.prosecutorArr = temp
			}
			this.plusNPrAll()
      	}
    },
   data () {
	return {
        count: 6,
		// prosecutorArr: ['0','0','0','0','0','0','0','0'],
		prosecutorArr: ['0','0','0','0','0','0'],
		//这里的数字数组是个8位数，只是占位，不能直接使用，看需求有可能是10位或11、12、20等等
		// numbers: '59832'
		//这个参数是后台传给我们的，也不能直接使用，需要转换
	}
    },
    methods:{
        PrefixInteger(num, length) { //给数字前面补零 比如‘59832’补成8位即位‘00059832’
            return (Array(length).join('0') + num).slice(-length);
        },
        getRandomNumber (min, max) { //为了看效果，refreshLeft触发增加数字看效果，和后台数据过来效果一样，不管增加或减少
            return Math.floor(Math.random() * (max - min + 1) + min)
        },
        plusNPrAll(){ //为了看效果，点击上面html中的iconfont触发，refreshLeft方法（我真啰嗦~）
            // const res = this.PrefixInteger(this.numbers, 6)
            const res = this.PrefixInteger(this.numbers, this.count)
            this.prosecutorArr = res.toString().split('')
        },
        refreshLeft(){ //刷新数据，我这里因为静态看效果，联调时将请求写在里面就好了
            this.numbers = parseInt(this.numbers)+ this.getRandomNumber(1, 100)
            this.plusNPrAll()
        }
    },
    mounted() {
        // this.plusNPrAll()
    },

  }
</script>
<style lang="scss" scoped>
 .chart {
	width: 100%;
	height: 50px;
	float: left;
	margin-top: 10px;
	margin-bottom: 15px;
	text-align: center;
	label{
		line-height: 40px;
		float: left;
	}
	.count{
		// float: left;
		padding: 0 5px;
		height: 34px;
		font-size: 40px;
		text-align: center;
    	display: inline-block;
		b{
			width: 24px;
			height: 34px;
			line-height: 34px;
			float: left;
			text-align: center;
			position: relative;
			z-index: 3;
			overflow: hidden;
			div{
				width: 100%;
				height: 400px;
				position: absolute;
				left: 0;
				top: 0;
				transition: all .8s ease-in-out;
				i{
					width: 100%;
					height: 40px;
					float: left;
					font-style: normal;
					font-size: 40px;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #58DBFF;
				}
			}
		}
		span{
			float: left;
			font-size: 20px;
			color: #58DBFF;
			line-height: 50px;
		}
	}
 }
</style>